/* 
1 当房源条件数据量很大的时候 一般来说 数据都不是在前端写死 接口提供 
  1 从redux中获取当前的城市名称
  2 根据当前的城市名称获取城市的id
  3 根据城市id获取该城市下的房源条件数据 

2 学习如何使用picker-view标签

3 如何结合项目更好的组织我们的数据和组件
  1 自己定义一个标题数组 来实现 点击标题的切换显示 
  2 把 区域 方式 租金 三个picker-view标签需要用到的数据 放入到一个大数组中 filterList
    当前的picker-view标签的数据 = filterList[currentIndex]
  3 给pickerView标签动态设置列数 cols属性控制 
  4 当currentIndex改变的时候 页面的显示请求
    1 0-2 显示pickerView
    2 3   显示 最后一个 筛选组件
    3 -1 都不显示 

4 封装一个滑动面板组件 sliderBar
  <SliderBar  direction="right" show={false}  ></SliderBar>
  1 过渡 + class 集合 

5 点击 确定按钮的时候 获取到 (4个)筛选组件的值
  1 先实现 1 到 3 组件的获取值 
    通过 pickerView组件的 onChange 事件来获取 (受控表单)
  2 为了方便管理数据 还是通过 大数组来存放 4个筛选组件的值
    selectValues=[
      区域或者地铁组件里面的值,
      租房方式里面的值,
      租金值,
      第四个筛选组件选中的值
    ]
6 获取 第四个筛选组件的值
  0 数组 selectValues[3]
  1 通过一个数组来记录用户选中了的值
  2 点击 元素的时候 判断
    1 假如说 数组 里面找不到这个被点击的值 执行 数组添加
    2 假如说 数组 已经是存在了 被点击的值 执行 数组移除 

7 点击确定
    1 把选中的值 按照 一定的规则 构造成一个对象
*/





import React, { Component, Fragment } from 'react';
import { connect } from "react-redux";
import axios from "../../../utils/request";
import indexCss from "./index.module.scss";
import { PickerView } from "antd-mobile";
import SliderBar from "../../../components/SliderBar";
class Index extends Component {


  state = {
    // 标题数组
    filterTitles: [
      { id: 0, text: "区域", cols: 3 },
      { id: 1, text: "方式", cols: 1 },
      { id: 2, text: "租金", cols: 1 },
      { id: 3, text: "筛选", cols: -1 }
    ],
    // 标题的选中的索引
    currentIndex: -1,
    // 筛选数据的大数组
    filterList: [
      // 区域 -  地铁
      [],
      // 方式
      [],
      // 租金
      [],
      // 筛选 先不管
      []
    ],
    // 筛选组件选中的值 
    selectValues: [
      // 区域 -  地铁
      [],
      // 方式
      [],
      // 租金
      [],
      // 筛选 先不管
      []
    ]

  }

  async componentDidMount() {
    const { cityName } = this.props;
    const id = (await axios.get("/area/info?name=" + cityName)).data.body.value;
    // axios库 接收 完整的地址  也接收 封装过 只有关键路径的地址
    // const conditions=(await axios.get("http://157.122.54.189:9060/houses/condition?id="+id)).data.body;
    const conditions = (await axios.get("/houses/condition?id=" + id)).data.body;

    let { filterList } = this.state;
    // 获取和设置 区域-地铁
    filterList[0] = [conditions.area, conditions.subway];
    // 方式
    filterList[1] = conditions.rentType;
    // 租金
    filterList[2] = conditions.price;
    //  第四个筛选组件的数据
    filterList[3] = [
      // 户型
      {
        label: "户型",
        children: conditions.roomType
      },
      {
        label: "朝向",
        children: conditions.oriented
      },
      {
        label: "楼层",
        children: conditions.floor
      },
      {
        label: "房屋亮点",
        children: conditions.characteristic
      },
    ]
    this.setState({ filterList });
  }


  // 标题点击事件
  titleClick = (currentIndex) => {
    this.setState({ currentIndex });
  }

  // 点击取消
  filterCancle = () => {
    this.setState({ currentIndex: -1 });
  }

  // pickerview组件的onchang事件
  pickerChange = (values) => {
    // 获取state中旧的选中的值
    let { selectValues, currentIndex } = this.state;

    // 找到了要操作的第几个筛选组件 
    selectValues[currentIndex] = values;

    this.setState({ selectValues });

  }

  // 第四个筛选组件的点击事件
  otherItemClick = (value) => {
    let { selectValues, currentIndex } = this.state;

    // 判断 数组中是否已经存在
    const index = selectValues[currentIndex].findIndex(v => v === value);
    if (index === -1) {
      // 没有找到
      selectValues[currentIndex].push(value);
    } else {
      // 找到
      selectValues[currentIndex].splice(index, 1);
    }
    this.setState({ selectValues });
  }

  // 点击确定 
  submitFilter = () => {
    const { selectValues } = this.state;
    // 1 获取 第一个筛选组件的属性 名 
    const areaSubwayName = selectValues[0][0];
    // 2 再获取第一个筛选组件的属性值 
    //  如果 selectValues[0][2] 是 null的话 我们就获取   selectValues[0][1] 
    const areaSubwayValue = selectValues[0][2] === "null" ? selectValues[0][1] : selectValues[0][2];

    // 对象动态属性   以下写法是错误的!! 
    // let obj1 = {
    //   areaSubwayName: areaSubwayValue
    // }


    // 3 获取 租房方式的属性值 
    const rentType=selectValues[1][0];

    // 3 获取租金 
    const price=selectValues[2][0];

    // 4 筛选
    const more=selectValues[3].join(',');

    let filterParams = {
      [areaSubwayName]: areaSubwayValue,
      rentType,
      price,
      more
    }

    // 过滤对象 把非法的值 删除掉  "null" undefined
    for (const key in filterParams) {
      if(["null",undefined,""].includes(filterParams[key])){
        // 删除了 非法的属性
        delete filterParams[key]
      }
    }

    // console.log(filterParams); 

    //  触发父组件中的事件
    this.props.submitFilter(filterParams);
    this.setState({ currentIndex:-1  });


  }

  // 根据currentIndex来显示不同的内容
  renderMain = () => {
    const { currentIndex, filterList, filterTitles, selectValues } = this.state;
    if (currentIndex === -1) {
      return <></>
      // } else if (currentIndex <= 2 && currentIndex >= 0)
    } else if ([0, 1, 2].includes(currentIndex)) {
      return <div className={indexCss.picker_content}>
        <PickerView
          data={filterList[currentIndex]}
          cols={filterTitles[currentIndex].cols}
          onChange={this.pickerChange}
          value={selectValues[currentIndex]}
        />
        <div className={indexCss.filter_btns}>
          <div onClick={this.filterCancle} className={indexCss.filter_btns_item}>取消</div>
          <div onClick={this.submitFilter} className={indexCss.filter_btns_item}>确定</div>
        </div>
      </div>
    } else if (currentIndex === 3) {
      return <div className={indexCss.other_content} >
        <SliderBar
          direction="right"
          show={currentIndex === 3} >
          <div className={indexCss.other_filter_main}>
            {
              filterList[currentIndex].map((v, i) =>
                <div className={indexCss.other_groups} key={i} >
                  <div className={indexCss.other_groups_title}>{v.label}</div>
                  <div className={indexCss.other_groups_content}>
                    {
                      v.children.map((vv, ii) =>
                        <div
                          className={[
                            indexCss.other_item,
                            selectValues[currentIndex].includes(vv.value) ? indexCss.active : ''
                          ].join(' ')}
                          onClick={this.otherItemClick.bind(this, vv.value)}
                          key={ii}  >{vv.label}</div>


                      )
                    }
                  </div>
                </div>
              )
            }
          </div>
          <div className={indexCss.other_filter_btns}>
            <div className={indexCss.other_btn}>取消</div>
            <div onClick={this.submitFilter} className={indexCss.other_btn}>确定</div>
          </div>
        </SliderBar>
      </div>
    } else {
      return <></>
    }
  }

  render() {
    const { filterTitles, currentIndex, filterList } = this.state;
    return (
      <div className={
        [
          indexCss.filter_panel,
          [0, 1, 2].includes(currentIndex) ? indexCss.top_mask : ''
        ].join(' ')
      }>
        <div className={indexCss.filter_view}>
          <div className={indexCss.filter_panel_title}>
            {filterTitles.map((v, i) => <div key={v.id}
              onClick={this.titleClick.bind(this, i)}
              className={
                [
                  indexCss.title_item,
                  i === currentIndex ? indexCss.active : ''
                ].join(' ')
              } >{v.text}</div>)}
          </div>

          <div className={indexCss.filter_content}>
            {this.renderMain()}
          </div>
        </div>

        {/* 遮罩层 只在索引  0 1 2 3 显示  什么时候隐藏 -1  */}
        <div onClick={this.filterCancle.bind(this)} hidden={currentIndex === -1} className={indexCss.mask}></div>
      </div>
    );
  }
}


const mapStateToProps = (state) => ({
  cityName: state.mapReducer.city.name
})



export default connect(mapStateToProps)(Index);